<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<!--
常用指令(二)
  * ng-class: 动态引用定义的样式  {aClass:true, bClass:false}
  * ng-style: 动态引用通过js指定的样式对象   {color:'red', background:'blue'}
  * ng-click: 点击监听, 值为函数调用, 可以传$event
  * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
  * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
-->
<style>
  .evenB {
    background-color: grey;
  }

  .oddB {
    background-color: green;
  }
</style>
<body ng-app="myApp">

<div ng-controller="MyCtrl">
  <div style="height: 100px;width: 100px" ng-style="style1" ng-mouseenter="enter()" ng-mouseleave="leave()"></div>
</div>

<div ng-controller="MyController2">
  <ur>
    <li ng-repeat="person in persons" ng-class="{evenB:$even,oddB:$odd}">
      {{person.name}}{{person.age}}
    </li>
  </ur>
</div>


<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  angular.module('myApp',[])
    .controller('MyCtrl',function ($scope) {
      $scope.style1 = {
        background: 'yellowgreen'
      }

      $scope.enter = function () {
        this.style1 = {
          background: 'pink'
        }
      }

      $scope.leave = function () {
        this.style1 = {
          background: 'yellowgreen'
        }
      }
    })
    .controller('MyController2',['$scope',function (aa) {
      aa.persons = [
        {name:'zzl1',age:19}
        ,{name:'zzl1',age:19}
        ,{name:'zzl1',age:19}
        ,{name:'zzl1',age:19}
      ]

    }])
</script>
</body>

</html>